<template>
  <div class="tbview">
    <!-- 头部和底部信息配置 -->
    <!-- 头部配置 -->
    <div class="top-box">
      <!-- 没有头部标题 -->
      <div
        v-if="topscreentitle === ''"
        class="nodata"
        @click="isshowdiaStau = 1"
      >
        <i class="el-icon-plus"></i>
        <div class="nodata-mes">添加页眉</div>
      </div>
      <div v-else class="top-com-box" @click="isshowdiaStau = 1">
        <topTitleOneVue :topscreentitle="topscreentitle" />
      </div>
    </div>
    <!-- 名字弹框 -->
    <div v-if="isshowdiaStau === 1" class="add-screen-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">页眉配置</div>
        <div class="line-close" @click="allclickmet(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div class="dia-main-inputline">
          <div class="inputline-name">页眉名称</div>
          <input v-model="topscreentitle" class="inputline-value" />
        </div>
      </div>
      <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="allclickmet(0)">取消</div>
        <div class="bottom-bar-confirm" @click="edittemTitle()">确认</div>
      </div>
    </div>

    <!-- ------------中间布局组件--------------- -->
    <div v-if="navindex >=0 && isshowlayou" class="layout-box">
      <layoneVue :navindex="navindex" :select-stau="selectStau" />
    </div>

    <!-- -------------底部配置------------------ -->
    <div class="bottom-box">
      <div v-if="!templateNavigationVOList[0]" class="nodata" style="margin-top:30px" @click="allclickmet(2)">
        <i class="el-icon-plus"></i>
        <span class="nodata-mes">添加页脚</span>
      </div>
      <div v-else class="bottom-com-box" @click="allclickmet(2)">
        <bottomBarsVue :bot-bar-list="templateNavigationVOList" />
      </div>
    </div>
    <!-- 底部导航栏弹窗-add -->
    <div v-if="isshowdiaStau === 2 && selectStau === 'add'" class="add-screen-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">添加页脚</div>
        <div class="line-close" @click="allclickmet(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in bottombarList"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">导航名称</div>
            <input v-model="item.name" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">页面布局</div>
            <select v-model="item.layoutCode" class="inputline-value">
              <option
                v-for="(layitem, layindex) in layoutList"
                :key="layindex"
                :value="layitem.layoutCode"
              >
                {{ layitem.layoutName }}
              </option>
            </select>
          </div>
          <div class="addline-icon">
            <div class="addline-icon-line">
              <div class="icon-line-name">未选中图标</div>
              <div v-if="item.notselecticon === ''" class="icon-line-value">
                <div class="not-iconurl" @click="openselcetInput(index,'notselecticon')">
                  <i class="el-icon-plus not-iconsty"></i>
                </div>
              </div>
              <div v-else class="icon-line-value">
                <img class="icon-line-value" :src="item.notselecticonurl" />
              </div>
            </div>
            <div class="addline-icon-line">
              <div class="icon-line-name">选中的图标</div>
              <div v-if="item.selecticon === ''" class="icon-line-value" @click="openselcetInput(index,'selecticon')">
                <div class="not-iconurl">
                  <i class="el-icon-plus not-iconsty"></i>
                </div>
              </div>
              <div v-else class="icon-line-value">
                <img class="icon-line-value" :src="item.selecticonurl" />
              </div>
            </div>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="delbarline(index)">
              删除此导航
            </div>
            <div
              v-if="bottombarList.length - 1 === index"
              class="addline-but2"
              @click="addbarline()"
            >
              增加一个导航
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="allclickmet(0)">取消</div>
        <div class="bottom-bar-confirm" @click="addnavMeaMet()">确认</div>
      </div>
    </div>
    <!-- 底部导航栏弹窗-edit -->
    <div v-if="isshowdiaStau === 2 && selectStau === 'edit'" class="add-screen-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">修改页脚</div>
        <div class="line-close" @click="allclickmet(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in editnavlist"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">导航名称</div>
            <input v-model="item.name" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">页面布局</div>
            <select v-model="item.layoutCode" class="inputline-value">
              <option
                v-for="(layitem, layindex) in layoutList"
                :key="layindex"
                :value="layitem.layoutCode"
              >
                {{ layitem.layoutName }}
              </option>
            </select>
          </div>
          <div class="addline-icon">
            <div class="addline-icon-line">
              <div class="icon-line-name">未选中图标</div>
              <div v-if="item.notselecticon === ''" class="icon-line-value" @click="openselcetInput(index,'notselecticon')">
                <img
                  v-if="item.notselecticonurlone && item.notselecticonurlone !== ''"
                  class="icon-line-value"
                  :src="'data:image/png;base64,'+item.notselecticonurlone"
                />
                <div
                  v-else
                  class="not-iconurl"
                  @click="openselcetInput(index,'notselecticon')"
                >
                  <i class="el-icon-plus not-iconsty"></i>
                </div>
              </div>
              <div v-else class="icon-line-value" @click="openselcetInput(index,'notselecticon')">
                <img class="icon-line-value" :src="item.notselecticonurl" />
              </div>
            </div>
            <div class="addline-icon-line">
              <div class="icon-line-name">选中的图标</div>
              <div v-if="item.selecticon === ''" class="icon-line-value" @click="openselcetInput(index,'selecticon')">
                <img
                  v-if="item.selecticonurlone && item.selecticonurlone !== ''"
                  class="icon-line-value"
                  :src="'data:image/png;base64,'+item.selecticonurlone"
                />
                <div v-else class="not-iconurl">
                  <i class="el-icon-plus not-iconsty"></i>
                </div>
              </div>
              <div v-else class="icon-line-value" @click="openselcetInput(index,'selecticonurl')">
                <img class="icon-line-value" :src="item.selecticonurl" />
              </div>
            </div>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="zhdelbarmes(item,index)">
              删除此导航
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="allclickmet(0)">取消</div>
        <div class="bottom-bar-confirm" @click="editnavMeaMet()">确认</div>
      </div>
    </div>

    <!-- 选择文件挂件-用完关掉 -->
    <input
      v-if="isshowuploadpic"
      ref="zhfileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="getFile"
    />
  </div>
</template>

<script>
import axios from 'axios';
import topTitleOneVue from "@/components/topTitles/top-title-one.vue";
import bottomBarsVue from "@/components/bottomBars/bottom-bars.vue";
import layoneVue from "@/components/layoutComs/layone.vue";
export default {
  name: "TopBottomConfig",
  components: { topTitleOneVue, bottomBarsVue, layoneVue },
  props: {
    selectStau: {
      type: String,
      default: () => ''
    },
    // 当前导航栏index
    navindex: {
      type: Number,
      default: () => {
        return -1
      }
    }
  },
  data() {
    return {
      isshowlayou: true,
      ishasbar: false,
      // 底部导航栏信息
      bottombarList: [
        {
          name: "基地概览",
          notselecticon: "",
          selecticon: "",
          layoutCode: 1
        }
        // {
        //   name: "生产情况",
        //   notselecticon: "",
        //   selecticon: "",
        //   layoutCode: 1
        // },
        // {
        //   name: "运营状况",
        //   notselecticon: "",
        //   selecticon: "",
        //   layoutCode: 1
        // },
        // {
        //   name: "共同富裕",
        //   notselecticon: "",
        //   selecticon: "",
        //   layoutCode: 1
        // }
      ],
      // 修改底部导航栏信息
      editnavlist: [],
      // 当前选择的图标信息
      nowselecticon: {
        i: '',
        name: ''
      },
      // 可选择布局的列表
      layoutList: [
        // { name: "左中右布局", id: 1 }
        // { name: "铺满布局", id: 2 }
      ],
      // 大屏标题
      topscreentitle: "",
      // 0不显示弹框1显示头部配置弹框2底部导航栏弹框
      isshowdiaStau: 0,
      // 当前模板详情
      templemessage: {},
      // 当前模板底部导航栏信息
      templateNavigationVOList: [],
      // 清空图片缓存
      isshowuploadpic: false
    };
  },
  watch: {
    navindex(newval) {
      this.isshowlayout = false
      setTimeout(
        () => {
          this.isshowlayout = true
        }
      )
      this.gettemplemes()
    },
    selectStau: {
      handler(newData) {
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.gettemplemes()
    this.getlayout()
  },
  methods: {
    // 添加导航栏信息
    async addnavMeaMet() {
      let isupload = true
      for (var i = 0; i < this.bottombarList.length; i++) {
        // 防止按照顺序添加时图标数据不全
        if (isupload) {
          let formData = new FormData();
          if (this.bottombarList[i].selecticon !== '' && this.bottombarList[i].notselecticon !== '') {
            formData.append('fileList', this.bottombarList[i].notselecticon)
            formData.append('fileList', this.bottombarList[i].selecticon)
            // formData.append('clickedLogo', this.bottombarList[i].selecticon);
            // formData.append('notClickedLogo', this.bottombarList[i].notselecticon);
            formData.append('sort', i + 1)
            formData.append('templateId', this.templemessage.templateId)
            formData.append('navigationName', this.bottombarList[i].name)
            formData.append('layoutCode', this.bottombarList[i].layoutCode)
            let baseurl = this.$zhurl
            let requrl = baseurl + '/template/addNavigation'
            await axios({
              url: requrl,
              method: 'POST',
              data: formData,
              timeout: 10000,
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then(
              res => {
                if (res.data.code === 1 && i + 1 === this.bottombarList.length) {
                  this.$message.success("添加页脚成功！")
                  this.$emit("gettemplemes");
                  this.gettemplemes()
                  this.isshowdiaStau = 0
                }
              }
            )
          } else {
            isupload = false
            this.$message.warning("请填写完整数据!code=" + i)
          }
        }
      }
    },
    // 修改底部导航栏信息
    async editnavMeaMet() {
      for (var i = 0; i < this.editnavlist.length; i++) {
        // 防止按照顺序添加时图标数据不全
        let formData = new FormData();
        if (this.editnavlist[i].name.length > 0) {
          if (this.editnavlist[i].notselecticon !== '' && this.editnavlist[i].selecticon !== '') {
            formData.append('fileList', this.editnavlist[i].notselecticon)
            formData.append('fileList', this.editnavlist[i].selecticon)
          }
          formData.append('templateNavigationId', this.editnavlist[i].templateNavigationId)
          formData.append('sort', i + 1)
          formData.append('templateId', this.templemessage.templateId)
          formData.append('navigationName', this.editnavlist[i].name)
          formData.append('layoutCode', this.editnavlist[i].layoutCode)
          let baseurl = this.$zhurl
          let requrl = baseurl + '/template/editNavigation'
          await axios({
            url: requrl,
            method: 'POST',
            data: formData,
            timeout: 1000,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(
            res => {
              if (this.editnavlist.length === i + 1) {
                if (res.data.code === 1) {
                  this.$message.success("修改页脚成功！")
                  this.isshowdiaStau = 0
                  this.$emit("gettemplemes");
                  this.gettemplemes()
                } else {
                  this.$message.warning("修改出现错误！")
                }
              }
            }
          )
        }
      }
    },
    // 删除某个导航信息
    async zhdelbarmes(e, i) {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/template/del'
      let params = {
        'templateNavigationId': e.templateNavigationId
      }
      await axios({
        url: requrl,
        method: 'POST',
        data: params,
        timeout: 1000
      }).then(
        res => {
          if (res.data.code === 1) {
            this.editnavlist.splice(i, 1)
            this.$message.success("删除成功！")
          }
        }
      )
    },
    // 修改页眉信息
    edittemTitle() {
      let query = this.$route.query;
      let baseurl = this.$zhurl
      let requrl = baseurl + '/template/updateTemplate'
      if (query.templateId) {
        let params = {
          'templateId': query.templateId,
          'templateName': this.topscreentitle
        }
        axios({
          method: "POST",
          url: requrl,
          data: params
        }).then(response => {
          let mes = response.data
          if (mes.code === 1) {
            this.$message.success('修改成功啦！')
            this.isshowdiaStau = 0
          }
        })
      }
    },
    // 获取布局信息
    getlayout() {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/layout/queryList'
      axios({
        method: 'GET',
        url: requrl
      }).then(
        res => {
          if (res.data.data) {
            this.layoutList = res.data.data || []
          }
        }
      )
    },
    // 打开选择图片
    openselcetInput(i, name) {
      this.isshowuploadpic = true
      this.nowselecticon = {
        i: i,
        name: name
      }
      setTimeout(
        () => {
          this.$refs.zhfileInput.click();
        }, 1000
      )
    },
    // 图片选择返回数据
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      // this.name = filename
      // this.$emit('imagename', filename)
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!"); // 判断图片是否有效
      }
      const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
      // fileReader.readAsDataURL(files[files.length - 1]);
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        // this.imageUrl = window.btoa(fileReader.result.toString());
        // let imageUrl = fileReader.result;
        if (this.nowselecticon.i >= 0) {
          // this.bottombarList[this.nowselecticon.i][this.nowselecticon.name] = imageUrl
          if (this.selectStau === 'add') {
            this.bottombarList[this.nowselecticon.i][this.nowselecticon.name] = files[files.length - 1]
            this.bottombarList[this.nowselecticon.i][this.nowselecticon.name + 'url'] = this.createObjectURL(files[files.length - 1])
          } else if (this.selectStau === 'edit') {
            this.editnavlist[this.nowselecticon.i][this.nowselecticon.name + 'one'] = ''
            this.editnavlist[this.nowselecticon.i][this.nowselecticon.name] = files[files.length - 1]
            this.editnavlist[this.nowselecticon.i][this.nowselecticon.name + 'url'] = this.createObjectURL(files[files.length - 1])
            console.log('修改后导航栏信息', this.editnavlist[this.nowselecticon.i])
          }
          this.isshowuploadpic = false
        }
      });
    },
    // 获取文件url
    createObjectURL(blob) {
      if (window.URL) {
        return window.URL.createObjectURL(blob);
      } else if (window.webkitURL) {
        return window.webkitURL.createObjectURL(blob);
      } else {
        return null;
      }
    },
    // 获取当前模板的详情
    gettemplemes() {
      let query = this.$route.query;
      let baseurl = this.$zhurl
      let requrl = baseurl + '/template/queryTemplateInfo'
      if (query.templateCode) {
        axios({
          method: "GET",
          url: requrl + '?templateCode=' + query.templateCode
        }).then(response => {
          let mes = response.data.data
          if (mes) {
            // console.log(mes)
            this.templemessage = mes
            this.topscreentitle = mes.templateName
            this.templateNavigationVOList = mes.templateNavigationVOList || []
          }
        })
      } else {
        this.$message.warning('请先选模板！')
      }
    },
    // 增加一个导航
    addbarline() {
      this.bottombarList.push({
        name: "",
        notselecticon: "",
        selecticon: "",
        layoutCode: "1"
      });
    },
    // 减少一个导航
    delbarline(i) {
      this.bottombarList.splice(i, 1);
    },
    allclickmet(i) {
      if (i === 0) {
        this.isshowdiaStau = 0;
      } else if (i === 1) {
        if (this.topscreentitle.length > 0) {
          // 调用保存页眉接口-获取页脚-提示成功-关闭弹框
          this.$message.success("保存页眉成功！");
          this.isshowdiaStau = 0;
        } else {
          this.$message.warning("页眉不可为空！");
        }
      } else if (i === 2) {
        if (this.selectStau === 'add') {
          this.isshowdiaStau = 2
          this.$message.success('准备添加页脚！')
        } else if (this.selectStau === 'edit') {
          this.isshowdiaStau = 2
          this.$message.success('准备修改页脚！')
          if (this.templateNavigationVOList[0]) {
          // 用于底部导航栏的修改-跟添加类似
            this.editnavlist = []
            this.templateNavigationVOList.forEach(
              (itemone, indexone) => {
                this.editnavlist.push(
                  {
                    name: itemone.navigationName,
                    // 自己选择后的图片文件
                    notselecticon: '',
                    // 后端传过来的base64
                    notselecticonurlone: itemone.clickedLogo || '',
                    selecticon: '',
                    selecticonurlone: itemone.notClickedLogo || '',
                    templateNavigationId: itemone.templateNavigationId,
                    layoutCode: itemone.layoutCode
                  }
                )
              }
            )
          }
        } else {
          this.$message.warning('请先选择状态')
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
.tbview {
  width: 100%;
  height: 100%;
  // background-color: aqua;
  position: relative;
  background: url(~@/assets/background1.jpg) 100% no-repeat;
  .top-box {
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    .top-com-box {
      width: 100%;
      height: 70px;
    }
  }
  .top-box:hover {
    border: 1px solid #33d4c2;
    cursor: pointer;
  }
  .layout-box{
    width: 100%;
    height: calc(100% - 120px);
    position: absolute;
    left: 0;
    top: 70px;
  }
  .bottom-box {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    .bottom-com-box {
      width: 100%;
      height: 100px;
    }
  }
  .bottom-box:hover {
    border: 1px solid #33d4c2;
    cursor: pointer;
  }
  .nodata {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #33d4c2;
    font-size: 24px;
    cursor: pointer;
    .nodata-icon {
      font-weight: 600;
    }
    .nodata-mes {
      // width: 200px;
      text-align: center;
      margin-left: 10px;
      font-size: 20px;
    }
  }
  .nodata:hover {
    color: $textColor;
  }
  .add-screen-dia {
    width: 462px;
    // height: 191px;
    background: #303640;
    border: 1px solid #005c6f;
    border-radius: 7px;
    position: fixed;
    top: 15%;
    left: 40%;
    background-color: #005c6f;
    z-index: 98;
    .top-bar {
      width: 460px;
      height: 10px;
      background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
      border-radius: 7px 7px 0px 0px;
    }
    .top-title-line {
      width: 450px;
      height: 35px;
      line-height: 35px;
      padding: 6px 8px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #484a4e;
      .line-title {
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: $textColor;
        letter-spacing: 2px;
      }
      .line-close {
        color: #10d7c4;
        cursor: pointer;
      }
      .line-close:hover {
        color: $textColor;
      }
    }
    .screen-dia-main {
      width: 462px;
      padding: 20px 10px;
      max-height: 550px;
      overflow-y: auto;
      overflow-x: hidden;
      .dia-main-inputline {
        width: 100%;
        padding: 10px  0;
        // background-color: #00FAAD;
        display: flex;
        justify-content: center;
        align-items: center;
        .inputline-name {
          min-width: 104px;
          width: fit-content;
          height: 24px;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          text-align: center;
        }
        .inputline-value {
            max-width: calc(100% - 104px);
          flex: 1;
          height: 32px;
          box-sizing: border-box;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #494e57;
          box-sizing: border-box;
          outline: 0;
        }
      }
      .dia-main-addline {
        width: 442px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: $textColor;
        line-height: 24px;
        border-bottom: #00faad 1px dashed;
        padding-bottom: 16px;
        margin-bottom: 10px;
        .addline-icon {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 48px;
          .addline-icon-line {
            width: 221px;
            height: 48px;
            line-height: 48px;
            display: flex;
            align-items: center;
            margin-top: 10px;
            .icon-line-name {
              width: 90px;
              height: 48px;
              line-height: 48px;
              text-align: center;
            }
            .icon-line-value {
              width: 48px;
              height: 48px;
              text-align: center;
              .not-iconurl {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
              }
              .not-iconurl:hover {
                border-color: #1caf7e;
              }
              .not-iconsty {
                font-size: 20px;
                color: #8c939d;
                width: 48px;
                height: 48px;
                line-height: 48px;
                text-align: center;
              }
            }
          }
          // .addline-select-line {
          //   margin-top: 12px;
          //   height: 48px;
          //   font-size: 16px;
          //   font-family: PingFang SC-Regular, PingFang SC;
          //   font-weight: 400;
          //   color: $textColor;
          //   line-height: 36px;
          //   padding-bottom: 16px;
          //   margin-bottom: 10px;
          //   .selcect-one {
          //     color: #00faad;
          //     margin-top: 12px;
          //     height: 36px;
          //     line-height: 36px;
          //     background-color: transparent;
          //     border: #00faad dashed 1px;
          //     cursor: pointer;
          //     option {
          //       background-color: #005c6f !important;
          //       color: $textColor;
          //       cursor: pointer;
          //     }
          //   }
          // }
        }
        .addline-but {
          width: 442px;
          display: flex;
          justify-content: space-around;
          margin-top: 15px;
          .addline-but1 {
            color: #00faad;
            border: 1px solid #00faad;
            cursor: pointer;
            padding: 5px 10px;
          }
          .addline-but1:hover {
            color: $textColor;
          }
          .addline-but2 {
            color: #3581fb;
            border: 1px solid #3581fb;
            cursor: pointer;
            padding: 5px 10px;
          }
          .addline-but2:hover {
            color: $textColor;
          }
        }
      }
      .dia-main-addline:last-of-type {
        padding-bottom: 0;
        margin: 0;
        border: none;
      }
    }
    .bottom-bar {
      width: 462px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 16px;
      .bottom-bar-cancel {
        width: 96px;
        height: 33px;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #0cb9ae;
        color: #0cb9ae;
        cursor: pointer;
        line-height: 33px;
        text-align: center;
      }
      .bottom-bar-cancel:hover {
        color: #00faad;
      }
      .bottom-bar-confirm {
        width: 96px;
        height: 33px;
        background: #0cb9ae;
        border-radius: 5px 5px 5px 5px;
        cursor: pointer;
        line-height: 33px;
        text-align: center;
      }
      .bottom-bar-confirm:hover {
        color: #10fab4;
      }
    }
  }
}
</style>
